當沒有任何CSS時，
HTML預設顯示區塊元素(block)方式都是 往下一行一行(row)長

HTML

...
p*3>lorem20(按tab)
...

那我想要排版成橫式，希望他往右一列一列(col)長該如何？

display: flex 柔性伸縮

只要在外包一層容器，並且在容器上加上display: flex就能輕鬆達成了~

往右一列一列(col)長

HTML

...
<div class="container">
    p*3>lorem20(按tab)
</div>
...

CSS

.container{
    display: flex;
}

flex中能包另一個flex (ex:先在外面製造並排效果、再做裡面與其他元素垂直排版)
flex就是如此的神奇，能迅速切出想要的版面。

主軸

display:flex

Display預設並排(先往右長)，按照比例做伸縮
長寬設超過也不會超出父層
如果沒有特別設定子元素的長寬，內層子元素預設都是等高等寬(取可以到達的最長、最高)

felx-direction 更改主軸方向、資料流向:左到右(預設)、右到左、上到下(像區塊block元素)、下到上

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

justify-content 主軸對準校準的位置: 起點(預設)、終點、中央、左右留小白、左右中留白、只有元素間留白

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;

flex-wrap 滿版的話(超出父元素範圍)會自動換行

flex-wrap: wrap;
flex-wrap: nowrap;

交錯軸 與主軸垂直的另一個軸

align-items 交錯軸對準校準的位置: 起點、終點、延伸

align-items: start;
align-items: end;
align-items: stretch;

align-content 在多行時才看得出效果

align-content: space-around;

各式Flex Box示意圖

float 是屬於比較舊式、傳統的寫法，
如今display: flex 能做到float大多數的排版且可以靈活運用
除非是很想學float到心癢難耐的地步、想知道flaot到底在float什麼的人以外，
否則可以直接跳過這個章節、進入下一頁。

float 浮動效果

就趁我還沒失憶前整理一下筆記吧(既然都學了)

float 會讓元素漂浮起來，依照父元素最大寬高去做排版，
如果同一行內容容納不下時才會做換行，所以適合做文繞圖的版型。
（其實float與display: inline-block有點類似）

float有兩種飄法，看要往左上方飄、還是往右上方飄
float是一個屬性，**用法不是display: float**哦

float: none;
float: left;
float: right;

簡易文繞圖方式，在圖片上掛float屬性

HTML

...
<img src="https://picsum.photos/300/200" alt="">
<p>lorem300(按tab)</p>
...

CSS

img{
    float: right;
}

只要不擋住Normal flow(可顯示對象在排列時所佔用的位置)，能做到無視block區塊。

清除浮動效果 clear

float效果並不會被清除，直到遇到具有clear屬性的元素之後，會向下清除浮動效果。

清除左側浮動、清除右側浮動、清除兩側浮動

clear: left;
clear: right;
clear: both;

原本的float會讓這段HTML變成這樣

...
<img src="https://picsum.photos/300/200" alt="">
<p> 段落文字 Lorem ipsum dolor sit amet.</p>
<p> 段落文字 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, quibusdam.</p>
<h1>標題</h1>
<p> 段落文字 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
...

浮動效果連帶影響到<h1>。
如果想從<h1>開始獨佔一行、不要再亂飄浮亂動了，想要硬一點
就加上clear來清除浮動效果
因為float right浮右側，就清除右側浮動效果

img{
    float: right;
}

h1{
    clear: right;
}

clear清除浮動後的效果

通常會如何去除浮動？

通常會把clear這項屬性放在哪裡？
以下是兩種關於clearfix的常見作法

清除浮動方法1

創造一個clear屬性的css class，需要清除浮動時就用他！
(這樣子的作法相對簡單，但也相對骯髒，因為會添加多餘的元素進HTML之中)

...
<img src="https://picsum.photos/300/200" alt="">
<p> 段落文字 Lorem ipsum dolor sit amet.</p>
<p> 段落文字 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, quibusdam.</p>
<div class="clearfix"></div>
<h1>標題</h1>
<p> 段落文字 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
...

CSS

.clearfix{
clear: both;
}

清除浮動方法2

在用到float元素的父層中額外加上下面的css

.clearfix::after{
    content: "";
    clear: both;
    display:table;
}